/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, useTheme, Table, TableBody, TableRow, Cell, CCell, Button, Collapse, TableHead
} from "customize-easy-ui-component";
import { DirectLink } from "../../../routing/Link";
import {ReportViewProps, ReportViewSubProps,} from "../../common/base";
import {
    分项末尾链接, 注意事项, 落款单位地址,
} from "../../common/rarelyVary";
import {multilines2Html} from "../../tools";
import {useMainRepUrlOr, useSplitSubCapacity, useSplitSubRepList} from "../../hook/useMainRepUrlOr";
import HashLinkObserver from "react-hash-link";
import {config测量仪, config部位汇总,} from "./orcBase";
import {俩列分项检验概况} from "./views";
import {useRepTableViewer} from "../../hook/useRepTableEditor";
import {useContext} from "react";
import RoutingContext from "../../../routing/RoutingContext";


/**@param fxIdx: 独立流转模式的 分项序号的基数； 若是嵌入式的分项该参数=undefined! rep?.id!==repId
 * */
export const ReportView: React.FunctionComponent<ReportViewProps> = (
    {repId,   source: parentOrc,  verId,rep, redId,fxIdx ,...other}
) => {
    const theme= useTheme();
    const {urlMainRep}=useMainRepUrlOr(rep);
    const lsBlockMax=useSplitSubCapacity(parentOrc?._SONIC_TS?.length,1);       //【模板敲定一次性最大几个分项显示出来】有些分项报告模板可能存在很多个分项 最多1个
    const {sumArea, areaIdAs, btnBindUses}=useSplitSubRepList(parentOrc?._SONIC_TS ?? [], lsBlockMax,false);
    const { get:getRouteUrl } = useContext(RoutingContext);
    const routeLevels=getRouteUrl().entries.length;
    const routeTemplate=getRouteUrl().entries[routeLevels-1]?.routeData?.params?.template;
    return (
     <React.Fragment>
       <HashLinkObserver />
      <div  id="rp_sonic_"  css={{"@media not print": {marginTop:'1rem', marginBottom: '1rem'},}}>
         <DirectLink  href={`/report/SONIC_TS/ver/${verId}/${repId}/SONIC_TS/_Controller`}>
            <div css={{"@media print":{display: 'none'} }}>
                <Button>{(repId===rep?.id && rep?.modeltype!=='SONIC_TS')? '内嵌式的':'独立流转的'}超声检测报告分项控制器</Button>
            </div>
         </DirectLink>

        {(new Array(sumArea).fill(null)).map((s:any,ak:number) => {
            const [isDisplay, bindBtn]=btnBindUses[ak];      //不要加上 tabIndex={0} 超过折叠区域最大数量的？
            //可折叠区的：独立流转的报告，和内嵌分项的，实际还分开的。两者独自控制折叠的。内嵌分项rep.id相等，独立流转的却不等的ID;
            return <React.Fragment key={ak}>
                <div key={ak} role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                    { <Text variant="h4">{`超声折叠区${ak+1}，`}{isDisplay ? `收起`:`更多..`}</Text> }
                </div>
                <Collapse id={`${ak}`} show={isDisplay} noAnimated>
                    { areaIdAs[ak]?.map((surpId: any, m:number) => {
                        const dispIdx=(fxIdx??0) +(m+ ak*lsBlockMax);
                        return <OneSubRepView key={m} fxIdx={fxIdx} dispIdx={dispIdx} rep={rep} repId={repId}
                                              verId={verId} parentOrc={parentOrc} surpId={surpId}/>
                    }) }

                    <div role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                        <Text variant="h4">{`超声折叠区${ak+1}结束,收起`}</Text>
                    </div>
                </Collapse>

            </React.Fragment>
        })}

      </div>
      {分项末尾链接({template:'SONIC_TS', repId: repId||'',verId,urlMainRep,
            nestIn:'SONIC_TS'!==routeTemplate, flowNest: repId!==rep?.id}) }
     </React.Fragment>
    );
}

/**超声检测示意图 图片独占 整张纸张的 居中显示的，  '93vh'
 * 唯独只有一个的分项报告的。
 * @param fxIdx: 独立流转模式的 分项序号的基数； 若是嵌入式的分项该参数=undefined! rep?.id!==repId
 * 附页：可能有图的 整页height: '96vh' +底下一个行的。
 * pdf版本 超声波检测报告（附页） ：示意图 是独立的一张纸。
 * */
const OneSubRepView: React.FunctionComponent<ReportViewSubProps> = (
    {fxIdx,dispIdx,rep,repId,verId,parentOrc,surpId}
) => {
    const theme = useTheme();
    const orc = parentOrc['_SONIC_TS_' + surpId];
    const [renderHead, renderRows] = useRepTableViewer(config部位汇总, '评定表', orc, true, true);
            //<div css={{marginTop: '1rem', "@media print": {pageBreakInside: 'avoid',marginTop:'unset'} }}>
    return <React.Fragment>
        <div css={{marginTop: '1rem', "@media print": {pageBreakInside: 'avoid'}}}>
            <Text variant="h2" css={{
                textAlign: 'center',
                // "@media (min-width:690px),print and (min-width:538px)": {
                //     fontSize: theme.fontSizes[6],
                // }
            }}>
                焊接接头超声检测报告{dispIdx ? '-' + dispIdx : ''}
            </Text>
            <Text css={{textAlign: 'center', display: 'block', fontSize: '0.8rem'}}>FJB/JK-1044-0-2018</Text>
            <div css={{
                display: 'flex',
                justifyContent: 'flex-end',
                flexDirection: 'row',
            }}>
                <Text css={{
                    [theme.mediaQueries.md]: {
                        marginRight: '2rem',
                    }
                }}>
                    报告编号：{rep.isp.no}
                </Text>
            </div>
            <Table fixed={["14%", "%", "14%", "36%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
                <TableBody>
                    {俩列分项检验概况({
                        orc, repId: repId!, verId, config: config测量仪, parentOrc,
                        href: `/report/SONIC_TS/ver/${verId}/${repId}/${surpId}/Instrument`
                    })}
                    <TableRow>
                        <CCell colSpan={4}>焊 接 接 头 超 声 检 测 结 果 评 定 表</CCell>
                    </TableRow>
                </TableBody>
            </Table>
        </div>
        <Table fixed={["10%", "6%", "9%", "%", "7%", "6%", "6%", "6%", "9%", "6%", "15%"]}
               css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableHead>
                {renderHead}
            </TableHead>
            <TableBody>
                {/*分项模式的：就不能用href={`/report/SONIC_TS/ver/${rep?.modelversion}/${rep?.id}/${surpId}/EvaluationForm#EvaluationForm`*/}
                <DirectLink href={`/report/SONIC_TS/ver/${verId}/${repId}/${surpId}/EvaluationForm#EvaluationForm`}>
                    {renderRows}
                </DirectLink>
            </TableBody>
        </Table>
        <Table fixed={["62%", "%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <DirectLink href={`/report/SONIC_TS/ver/${verId}/${repId}/${surpId}/ResultDiagram`}>
                    <TableRow>
                        <Cell colSpan={2}>
                            <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                                <Text css={{fontSize: '0.8rem'}}>检测结果：</Text><br/>{orc?.检测结果 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                </DirectLink>
            </TableBody>
        </Table>
        {(orc?.示图说明 || orc?._FILE_部位) &&
            <Table fixed={["%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
                <TableBody>
                    <DirectLink href={`/report/SONIC_TS/ver/${verId}/${repId}/${surpId}/ResultDiagram`}>
                        <TableRow>
                            <Cell css={{"@media print": {height: orc?._FILE_部位 ? '93vh' : undefined,}, padding: 0,}}>
                                <div css={{whiteSpace: 'pre-wrap'}}>
                                    <Text css={{margin: '0 2rem'}}>超声检测示意图：</Text><br/>{orc.示图说明}
                                </div>
                                <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',}}>
                                    {orc?._FILE_部位?.url &&
                                        <img src={process.env.REACT_APP_OSS_ENDP + orc?._FILE_部位?.url}
                                             alt={orc?._FILE_部位?.url}
                                             css={{
                                                 maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                                 maxWidth: '-webkit-fill-available',
                                                 [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                                                 //【想法】大约一整页height: '96vh' +底下一个行的。
                                                 "@media print": {maxWidth: '100%'},        //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                                             }}
                                        />
                                    }
                                </div>
                            </Cell>
                        </TableRow>
                    </DirectLink>
                </TableBody>
            </Table>
        }
        <Table fixed={["9%", "%", "9%", "18%", "7%", "14%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <TableRow>
                    <CCell>检验：</CCell><CCell></CCell>
                    <CCell>级别</CCell><CCell>UT－Ⅱ</CCell><CCell>日期</CCell><CCell>2024-03-20</CCell>
                </TableRow>
                <TableRow>
                    <CCell>审核：</CCell><CCell></CCell>
                    <CCell>级别</CCell><CCell>UT－Ⅲ</CCell><CCell>日期</CCell><CCell>2024-03-22</CCell>
                </TableRow>
            </TableBody>
        </Table>
    </React.Fragment>;
}

/*注入？资格证等级
    "LV1": "UT－Ⅱ,UT－Ⅲ",
    "LV2": "UT－Ⅱ,UT－Ⅲ"
*/
